<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <%@ include file="/common/dxp/include/common-base.jsp"%>
    <title>${titleName}</title>
</head>
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

    <!-- top start -->
    <%@include file="/common/dxp/top.jsp" %>
    <!-- top end -->

    <!-- left start -->
    <%@include file="/common/dxp/left.jsp" %>
    <!-- left end-->

    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <div class="col-xs-6 pr2">
                    <div class="box box-solid home-box">
                        <div class="box-header" style="border-bottom:1px solid #e2e2e2;">
                            近10日服务请求成功和失败次数统计
                        </div>
                        <div class="box-body no-padding">
                            <div id="info_div" style="height: 350px"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 pl2">
                    <div class="box box-solid home-box">
                        <div class="box-header" style="border-bottom:1px solid #e2e2e2;">注册数据汇总</div>
                        <div class="box-body no-padding">
                            <div class="text-center">
                                <div id="container_14" class="show-grid" style="height:350px;"></div>
                                <div class="pt30 hidden">
                                    <div class="col-md-4">
                                        <div class="overview">
                                            <span class="largeSize black-largeSize" id="span_total_unit">0</span>
                                            <span class="smallSize">个</span>
                                        </div>
                                        <div>
                                            <span class="smallSize">注册单位</span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="overview">
                                            <span class="largeSize red-largeSize" id="span_total_sysreg">0</span>
                                            <span class="smallSize">个</span>
                                        </div>
                                        <div>
                                            <span class="smallSize">注册系统</span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="overview">
                                            <span class="largeSize xy-largeSize" id="span_total_interface"></span>
                                            <span class="smallSize">个</span>
                                        </div>
                                        <div>
                                            <span class="smallSize">注册服务/接口</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 pr2">
                    <div class="box box-solid home-box">
                        <div class="box-header" style="border-bottom:1px solid #e2e2e2;">
                            近10日服务请求总次数统计
                        </div>
                        <div class="box-body no-padding">
                            <div id="echarts_main" style="height: 350px;"></div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6 pl2">
                    <div class="box box-solid home-box">
                        <div class="box-header" style="border-bottom:1px solid #e2e2e2;">
                            服务请求成功次数Top10
                            <div class="box-tools pull-right">
                                <span><input type="radio" name="input_change_req_count" value="0" onclick="echarts_view(0)"> 当日&nbsp;&nbsp;</span>
                                <span><input type="radio" name="input_change_req_count" value="1" onclick="echarts_view(1)"> 当月&nbsp;</span>
                                <span><input type="radio" name="input_change_req_count" value="3" checked="checked" onclick="echarts_view(3)"> 近三月&nbsp;&nbsp;</span>
                                <span><input type="radio" name="input_change_req_count" value="12" onclick="echarts_view(12)"> 近一年&nbsp;</span>
                            </div>
                        </div>
                        <div class="box-body no-padding">
                            <div id="echarts_main_top" style="height:350px;"></div>
                        </div>
                    </div>
                </div>

                <div style="display: none">
                    <select id="dxpUnit" class="form-control  clean" disabled
                            data-temp-obj="dxSysReg.userOwner" data-dict-code="dictItemList" data-dict-cate="dxpUnit" data-type-tag="select" data-def=""
                            data-name="dxInterfaceReg.userOwner" >
                    </select>
                    <select id="interfaceCode" class="form-control clean" disabled data-temp-obj="dxInterfaceReg.interfaceCode" data-name="dxInterfaceReg.interfaceCode"
                            data-obj-name="dxInterfaceReg" data-dict-code="dymicSql" data-type-tag="select"
                            data-colmun="{value:'interfaceCode',text:'interfaceName'}" data-page-name="dx-interface-reg" data-form-name="searchForm"
                            data-def="">
                    </select>
                </div>
                <script type="text/template" id="dataList-template">
                    <? for ( var i = 0; i < rows.length; i++) {?>
                    <option value="<?=rows[i].interfaceCode?>"><?=rows[i].interfaceName?></option>
                    <?}?>
                </script>
                <script>
                    var clickMenu= 'dxp-index';
                    var userId  = "${loginUser.userId}",userEname="${loginUser.userEname}",orgId  = "${loginUser.orgId}";
                    var dictListMap = DictUtil.initDictAndDymic();
                    var arrDate = getBeforeDate(10,'arr');
                    $(function () {
                        getCSstatistics();
                        getSuccess();
                        var unitCount = Object.keys(dictListMap["dxpUnit"]).length;
                        $('#span_total_unit').text(unitCount);
                        getSysRegAndInterfaceTotal();
                        var defCounts = 3;
                        $("input[type='radio'][name='input_change_req_count'][value='"+defCounts+"']").prop('checked',true);
                        echarts_view(defCounts);
                    })


                    function getSuccess() {
                        $.ajax({
                            type:'get',
                            url:common_list_url,
                            data: {'pageName': 'dx-data-statistics-type', 'formName': 'statisticsForm','gte':arrDate[0],'lte':arrDate[arrDate.length-1],'statType':'2'},
                            dataType: 'json',
                            success: function (myData) {
                                if(myData.flag == 'T'){
                                    var xAxisData = arrDate,
                                        successData = [],
                                        failureData = [];
                                    arrDate.forEach(function (items,index) {
                                        successData.push(myData.rows[0][items]?myData.rows[0][items].success:0);
                                        failureData.push(myData.rows[0][items]?myData.rows[0][items].failure:0);
                                    })
                                    var myChart = echarts.init(document.getElementById('info_div'));
                                    var option = {
                                        backgroundColor:'#ffffff',
                                        title: {
                                            show: false,
                                            text: "近10日服务请求成功和失败次数统计",
                                            top: "30px",
                                            left: "left"
                                        },
                                        tooltip: { //提示框组件
                                            trigger: 'axis',
                                            formatter: '{b}<br />{a0}: {c0}次<br />{a1}: {c1}次',
                                            axisPointer: {
                                                type: 'shadow',
                                                label: {
                                                    backgroundColor: '#6a7985'
                                                }
                                            },
                                            textStyle: {
                                                color: '#fff',
                                                fontStyle: 'normal',
                                                fontFamily: '微软雅黑',
                                                fontSize: 12,
                                            }
                                        },
                                        grid: {
                                            left: '6%',
                                            right: '4%',
                                            //	padding:'0 0 10 0',
                                            containLabel: true,
                                        },
                                        legend: {//图例组件，颜色和名字
                                            right:'0%',
                                            top:'0%',
                                            itemGap: 16,
                                            itemWidth: 18,
                                            itemHeight: 10,
                                            data:[{
                                                name:'成功',
                                                //icon:'image://../wwwroot/js/url2.png', //路径
                                            },
                                                {
                                                    name:'失败',
                                                }],
                                            textStyle: {
                                                color: '#444',
                                                fontStyle: 'normal',
                                                fontFamily: '微软雅黑',
                                                fontSize: 12
                                            }
                                        },
                                        xAxis: [
                                            {
                                                type: 'category',
                                                //	boundaryGap: true,//坐标轴两边留白
                                                data: xAxisData,
                                                axisLabel: { //坐标轴刻度标签的相关设置。
                                                    interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                                                    //	margin:15,
                                                    // textStyle: {
                                                    //     color: '#078ceb',
                                                    //     fontStyle: 'normal',
                                                    //     fontFamily: '微软雅黑',
                                                    //     fontSize: 12,
                                                    // },
                                                    rotate:45,
                                                },
                                                axisTick:{//坐标轴刻度相关设置。
                                                    show: false,
                                                },
                                                axisLine:{//坐标轴轴线相关设置
                                                    lineStyle:{
                                                        // color:'#fff',
                                                        // opacity:0.2
                                                    }
                                                },
                                                splitLine: { //坐标轴在 grid 区域中的分隔线。
                                                    // show: false,
                                                }
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value',
                                                splitNumber: 5,
                                                axisLabel: {
                                                    textStyle: {
                                                        color: '#444',
                                                        fontStyle: 'normal',
                                                        fontFamily: '微软雅黑',
                                                        fontSize: 12,
                                                    }
                                                },
                                                axisLine:{
                                                    show: true
                                                },
                                                axisTick:{
                                                    show: false
                                                },
                                                splitLine: {
                                                    show: true,
                                                    lineStyle: {
                                                        // color: ['#fff'],
                                                        // opacity:0.06
                                                    }
                                                }

                                            }
                                        ],
                                        series : [
                                            {
                                                name:'成功',
                                                type:'bar',
                                                data: successData,
                                                barWidth: 10,
                                                // barGap:0,//柱间距离
                                                // barCategoryGap: 0,
                                                label: {//图形上的文本标签
                                                    normal: {
                                                        show: true,
                                                        position: 'top',
                                                        textStyle: {
                                                            color: '#444',
                                                            // fontStyle: 'normal',
                                                            // fontFamily: '微软雅黑',
                                                            // fontSize: 12,
                                                        }
                                                    },
                                                },
                                                itemStyle: {
                                                    normal: {
                                                        show: true,
                                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                            offset: 0,
                                                            // color: '#5768EF'
                                                            color: '#37a2da'
                                                        }, {
                                                            offset: 1,
                                                            color: '#37a2da'
                                                        }]),
                                                        barBorderRadius: 50,
                                                        borderWidth: 0,
                                                    }
                                                },
                                            },
                                            {
                                                name:'失败',
                                                type:'bar',
                                                data:failureData,
                                                barWidth: 10,
                                                barGap:'10%',/*多个并排柱子设置柱子之间的间距*/
                                                // barCategoryGap:'50%',
                                                label: {//图形上的文本标签
                                                    normal: {
                                                        show: true,
                                                        position: 'top',
                                                        textStyle: {
                                                            color: '#444',
                                                            // fontStyle: 'normal',
                                                            // fontFamily: '微软雅黑',
                                                            // fontSize: 12,
                                                        },
                                                    },
                                                },
                                                itemStyle: {
                                                    normal: {
                                                        show: true,
                                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                            offset: 0,
                                                            color: '#fb7293'
                                                        }, {
                                                            offset: 1,
                                                            // color: '#69CBF2'
                                                            color: '#fb7293'
                                                        }]),
                                                        barBorderRadius: 50,
                                                        borderWidth: 0,
                                                    }
                                                },
                                            }
                                        ]
                                    };
                                    myChart.setOption(option);
                                }
                                console.log(myData,'arrDate111111');
                            }
                        });
                    }
                    function getCSstatistics(type) {
                        var paramLoadData = {"pageName": "dx-data-statistics-type","formName":"statisticsForm","statType":"3","gte": arrDate[0],"lte":arrDate[arrDate.length-1]};
                        $.ajax({
                            type: 'get',
                            url: ctx+ "/trans/list/",//"/iss/trans/list/"
                            data: paramLoadData,
                            dataType: 'json',
                            success: function (myData) {
                                console.log("echarts->"+type,myData);
                                var titles=[];
                                var datas=[];
                                var dict = dictListMap["dx-interface-reg-searchForm"];
                                if(myData.rows){
                                    titles = arrDate;
                                    arrDate.forEach(function (items,index) {
                                        datas.push(myData.rows[0][items]?myData.rows[0][items]:0);
                                    });
                                }
                                var myChart = echarts.init(document.getElementById("echarts_main"));
                                // 指定图表的配置项和数据
                                var option = {
                                    // 标题
                                    title: {
                                        show:false,
                                        text: '近10日服务请求总次数统计'
                                    },
                                    grid: { // 控制图的大小，调整下面这些值就可以，
                                        left: '8%',
                                        right: '4%',
                                        y2: 80,
                                        // y: 20 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
                                    },
                                    // 工具箱
                                    toolbox: {
                                        show: true,
                                        feature:{
                                            saveAsImage:{
                                                show:false
                                            },
                                            restore:{
                                                show:false
                                            },
                                            dataView:{
                                                show:false
                                            },
                                            dataZoom:{
                                                show:false
                                            },
                                            magicType:{
                                                type:['line','bar']
                                            }
                                        }
                                    },
                                    tooltip:{
                                        trigger:'axis'
                                    },
                                    // x轴
                                    xAxis: {
                                        data: titles,
                                        axisLabel: {
                                            interval:0,
                                            rotate:45,//倾斜度
                                            formatter:function(value){
                                                return value;
                                                /*var ret = "";//拼接加\n返回的类目项
                                                var maxLength = 6;//每项显示文字个数
                                                var valLength = value.length;//X轴类目项的文字个数
                                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                                if (rowN > 1){ //如果类目项的文字大于1行,
                                                    for (var i = 0; i < rowN; i++) {
                                                        var temp = "";//每次截取的字符串
                                                        var start = i * maxLength;//开始截取的位置
                                                        var end = start + maxLength;//结束截取的位置
                                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                                        temp = value.substring(start, end) + "\n";
                                                        ret += temp; //凭借最终的字符串
                                                    }
                                                    console.log(ret,'ret')
                                                    return ret;
                                                } else {
                                                    console.log(value,'ret')
                                                    return value;
                                                }*/
                                            }
                                        }
                                    },
                                    yAxis: {
                                    },
                                    // 数据
                                    series: [{
                                        name: '次数',
                                        type: 'line',
                                        data: datas,
                                        barWidth:20,//柱图宽度
                                        itemStyle:{
                                            normal: {
                                                // barBorderRadius: 10,
                                                //渐变色
                                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {offset: 0, color: '#5757f9'},                   //柱图渐变色
                                                    {offset: 0.5, color: '#328fff'},                 //柱图渐变色
                                                    {offset: 1, color: '#9ca8ff'},                   //柱图渐变色
                                                ]),
                                                //柱图上值
                                                label: {
                                                    show: true,
                                                    position: 'top',
                                                    textStyle: {
                                                        // color: '#800080'
                                                    }
                                                }
                                            }
                                        }
                                        //,
                                        // markPoint:{
                                        //     data:[
                                        //         {type:'max',name:'最大值'},
                                        //         // {type:'min',name:'最小值',symbol:'arrow'}
                                        //     ]
                                        // }
                                    }
                                    ]
                                };
                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            }
                        });
                    }
                    function echarts_view(type) {
                        var date = new Date(); //日期对象
                        var year = date.getFullYear();
                        var dateStart = year;
                        if(type==1){
                            var month = date.getMonth()+1;
                            dateStart += '-' + (month > 9 ? month : ('0'+month)) + '-01';
                        } else if(type==3){
                            var month = date.getMonth()+1;
                            if (parseInt(month) == 1) {//如果是1月份，则取上一年的10月份
                                dateStart = (parseInt(year) - 1) + '-10-01';
                            }else if (parseInt(month) == 2) {//如果是2月份，则取上一年的11月份
                                dateStart = (parseInt(year) - 1) + '-11-01';
                            } else if (parseInt(month) == 3) {//如果是3月份，则取上一年的12月份
                                dateStart = (parseInt(year) - 1) + '-12-01';
                            }else{
                                month = month-2;
                                dateStart = year +'-'+ (month > 10 ? month : ('0'+month))+ '-01';
                            }
                        } else if(type==0){
                            dateStart = date.format('yyyy-MM-dd');
                        } else {
                            var month = date.getMonth()+1;
                            if(month < 12){
                                month = month+1;
                                dateStart = (parseInt(year) - 1) +'-'+ (month > 10 ? month : ('0'+month))+ '-01';
                            } else {
                                dateStart = year +"-01-01";
                            }
                        }
                        //var gteLong = date.format("yyyy-MM-dd");
                        console.log('echarts_view',type, dateStart);
                        var paramLoadData = {"statType":"4","gte": dateStart,"pageName": "dx-data-statistics-type","formName":"statisticsForm"};
                        paramLoadData["rows"]="10";
                        $.ajax({
                            type: 'get',
                            url: ctx+ "/trans/list/",//"/iss/trans/list/"
                            data: paramLoadData,
                            dataType: 'json',
                            success: function (myData) {
                                console.log("echarts->"+type,myData);
                                var titles=[];
                                var datas=[];
                                var dict = dictListMap["dx-interface-reg-searchForm"];
                                if(myData.rows){
                                    var rows = myData.rows;
                                    for(var k in rows){
                                        titles.push(strUtil.doNull(dict[rows[k].key],rows[k].key));
                                        datas.push(rows[k].count);
                                    }
                                }
                                var myChart = echarts.init(document.getElementById("echarts_main_top"));
                                // 指定图表的配置项和数据
                                var option = {
                                    // 标题
                                    title: {
                                        show:false,
                                        text: '服务请求成功次数Top10'
                                    },
                                    grid: { // 控制图的大小，调整下面这些值就可以，
                                        left: '8%',
                                        right: '4%',
                                        y2: 80,
                                        // y: 20 // y2可以控制倾斜的文字狱最右边的距离，放置倾斜的文字超过显示区域
                                    },
                                    // 工具箱
                                    toolbox: {
                                        show: true,
                                        feature:{
                                            saveAsImage:{
                                                show:false
                                            },
                                            restore:{
                                                show:false
                                            },
                                            dataView:{
                                                show:false
                                            },
                                            dataZoom:{
                                                show:false
                                            },
                                            magicType:{
                                                type:['line','bar']
                                            }
                                        }
                                    },
                                    tooltip:{
                                        trigger:'axis'
                                    },
                                    // x轴
                                    xAxis: {
                                        data: titles,
                                        axisLabel: {
                                            interval:0,
                                            rotate:45,//倾斜度
                                            formatter:function(value){
                                                var ret = "";//拼接加\n返回的类目项
                                                var maxLength = 10;//每项显示文字个数
                                                var valLength = value.length;//X轴类目项的文字个数
                                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                                if (rowN > 1){ //如果类目项的文字大于1行,
                                                    for (var i = 0; i < 1; i++) {//rowN
                                                        var temp = "";//每次截取的字符串
                                                        var start = i * maxLength;//开始截取的位置
                                                        var end = start + maxLength;//结束截取的位置
                                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                                        ret = value.substring(start, end);
                                                        // temp = value.substring(start, end) + "\n";
                                                        // ret += temp; //凭借最终的字符串
                                                    }
                                                    return ret;
                                                } else {
                                                    return value;
                                                }
                                            }
                                        }
                                    },
                                    yAxis: {
                                    },
                                    // 数据
                                    series: [{
                                        name: '次数',
                                        type: 'bar',
                                        data: datas,
                                        barWidth:20,//柱图宽度
                                        itemStyle:{
                                            normal: {
                                                // barBorderRadius: 10,
                                                //渐变色
                                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {offset: 0, color: '#5757f9'},                   //柱图渐变色
                                                    {offset: 0.5, color: '#328fff'},                 //柱图渐变色
                                                    {offset: 1, color: '#9ca8ff'},                   //柱图渐变色
                                                ]),
                                                //柱图上值
                                                label: {
                                                    show: true,
                                                    position: 'top',
                                                    textStyle: {
                                                        // color: '#800080'
                                                    }
                                                }
                                            }
                                        }
                                        //,
                                        // markPoint:{
                                        //     data:[
                                        //         {type:'max',name:'最大值'},
                                        //         // {type:'min',name:'最小值',symbol:'arrow'}
                                        //     ]
                                        // }
                                    }
                                    ]
                                };
                                // 使用刚指定的配置项和数据显示图表。
                                myChart.setOption(option);
                            }
                        });
                    }

                    function getSysRegAndInterfaceTotal() {
                        $.ajax({
                            type: 'get',
                            url: common_list_url,
                            data: {'pageName': 'dx-sys-reg', 'formName': 'searchForm'},
                            dataType: 'json',
                            success: function (myData) {
                                console.log('sysReg.res', myData);
                                if ("T" == myData.flag) {
                                    $('#span_total_sysreg').text(myData.total);
                                }
                                $.ajax({
                                    type: 'get',
                                    url: common_list_url,
                                    data: {'pageName': 'dx-interface-reg', 'formName': 'searchForm'},
                                    dataType: 'json',
                                    success: function (myData) {
                                        console.log('interfaceReg.res', myData);
                                        if ("T" == myData.flag) {
                                            $('#span_total_interface').text(myData.total);
                                            initEcharts_dgyh('container_14');
                                        }
                                    }
                                });
                            }
                        });
                    }

                    //多个圆环
                    function initEcharts_dgyh(id){
                        var chart_container = echarts.init(document.getElementById(id));
                        var dataStyle = {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                                shadowBlur: 0,
                                shadowColor: '#f0f0f0'
                            }
                        };
                        var option = {
                            // backgroundColor: "#20263f",
                            series: [{
                                name: '第一个圆环',
                                type: 'pie',
                                clockWise: false,
                                radius: [68, 76],
                                itemStyle: dataStyle,
                                hoverAnimation: false,
                                center: ['16%', '50%'],
                                data: [{
                                    value: $('#span_total_unit').text(),
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#85CD9E',
                                                    align: 'center',
                                                    fontSize: 18,
                                                    fontWeight: "bold"
                                                },
                                                b: {
                                                    color: '#444',
                                                    align: 'center',
                                                    fontSize: 14
                                                }
                                            },
                                            formatter: function(params){
                                                return "{a|"+params.value+"个}"+"\n\n{b|注册单位}";
                                            },
                                            position: 'center',
                                            show: true,
                                            textStyle: {
                                                fontSize: '14',
                                                fontWeight: 'normal',
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#9fe6b8',
                                            shadowColor: '#9fe6b8',
                                            shadowBlur: 0
                                        }
                                    }
                                }/**, {
								value: 0,
								name: 'invisible',
								itemStyle: {
									normal: {
										color: '#f0f0f0'
									},
									emphasis: {
										color: '#f0f0f0'
									}
								}
							}**/]
                            }, {
                                name: '第二个圆环',
                                type: 'pie',
                                clockWise: false,
                                radius: [68, 76],
                                itemStyle: dataStyle,
                                hoverAnimation: false,
                                center: ['50%', '50%'],
                                data: [{
                                    value: $('#span_total_sysreg').text(),
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#ff9f7f',
                                                    align: 'center',
                                                    fontSize: 18,
                                                    fontWeight: "bold"
                                                },
                                                b: {
                                                    color: '#444',
                                                    align: 'center',
                                                    fontSize: 14
                                                }
                                            },
                                            formatter: function(params){
                                                return "{a|"+params.value+"个}"+"\n\n{b|注册系统}";
                                            },
                                            position: 'center',
                                            show: true,
                                            textStyle: {
                                                fontSize: '14',
                                                fontWeight: 'normal',
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#ff9f7f',
                                            shadowColor: '#ff9f7f',
                                            shadowBlur: 0
                                        }
                                    }
                                }]
                            }, {
                                name: '第三个圆环',
                                type: 'pie',
                                clockWise: false,
                                radius: [68, 76],
                                itemStyle: dataStyle,
                                hoverAnimation: false,
                                center: ['84%', '50%'],
                                data: [{
                                    value: $('#span_total_interface').text(),
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#8db4f0',
                                                    align: 'center',
                                                    fontSize: 18,
                                                    fontWeight: "bold"
                                                },
                                                b: {
                                                    color: '#000000',
                                                    align: 'center',
                                                    fontSize: 14
                                                }
                                            },
                                            formatter: function(params){
                                                // return "{b|成交统计}\n\n"+"{a|"+params.value+"亿}"+"\n\n{b|增长3%}";
                                                return "{a|"+params.value+"个}"+"\n\n{b|注册服务/接口}";
                                            },
                                            position: 'center',
                                            show: true,
                                            textStyle: {
                                                fontSize: '14',
                                                fontWeight: 'normal',
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#96bfff',
                                            shadowColor: '#96bfff',
                                            shadowBlur: 0
                                        }
                                    }
                                }]
                            }]
                        };
                        chart_container.setOption(option);
                    }
                </script>
        </section>
    </div>
</div>
</body>
</html>